<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="shortcut icon" href="images/product.ico" />
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="./style/bootstrap.min.css">
    <!-- 初始化浏览器样式 -->
    <link rel="stylesheet" href="./style/initial.css">
     <link rel="stylesheet" href="./style/scroll.css">
    <!-- 引入首页样式 -->
    <link rel="stylesheet" href="./style/index.css">


    <style type="text/css">
        ::-webkit-scrollbar{
            display:none;
        }
        .mt-number-animate{ line-height:54px; height: 54px;/*设置数字显示高度*/;
            color: #f9f9f9;font-weight: 600; font-size: 38px;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }
        .mt-number-animate .mt-number-animate-dot{ width: 15px;/*设置分割符宽度*/ line-height: 40px; float: left; text-align: center;}
        .mt-number-animate .mt-number-animate-dom{ width: 27px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}
        .mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}
    </style>
    <!-- 引入jQuery文件 -->
    <!--<script src="./script/jquery.js"></script>-->
    <!-- 引入bootstrap.js文件 -->
    <script src="./script/bootstrap.min.js"></script><script src="./script/common.js"></script>
    <!-- 引入百度地图api -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=swUtRPLGEkpkr96yGpBNrlsSBXKuYWIb"></script>
    <!-- 引入echarts.min文件 -->
    <script src="./script/echarts.min.js"></script>

    <script src="./script/overWalls.js"></script>
    <script src="./script/datePicker.js"></script>
    <script src="./script/jquery.min.js"></script>
    <!--<script src="./script/TweenLite.min.js"></script>-->
    <!--<script src="./script/lem_counter.js"></script>-->
    <script src="./script/scrollNum.js"></script>

    <!--<script src="./script/count.js"></script>-->
    <!--<script type="text/javascript">-->
        <!--$(function(){-->
            <!--$("#tourists_lose_today").numberRock({-->
                <!--lastNumber:6666,-->
                <!--duration:5000,-->
                <!--easing:'swing'  //慢快慢-->
            <!--});-->
        <!--});-->
    <!--</script>-->
    <!--引入数字翻滚效果-->
    <!--<script src="./script/dc_scroll.js" type="text/javascript"></script>-->
    <style>
        .datainp{ width:200px; height:30px; border:1px #ccc solid;}
        .datep{ margin-bottom:40px;}
    </style>
</head>

<body scroll="no">
    <!-- 标题 -->
    <!--<div id="date_picker">-->
    <!--<p class="datep">-->
        <!--<input class="datainp" id="dateinfo" type="text" placeholder="请选择"  readonly>-->
    <!--</p>-->

    <!--</div>-->
    <div id="background" class="background" style="display: none; "></div>
    <div id="progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>
    <div id="header_box" class="row">
        <div id="header" class="col-lg-12 col-md-8">
          <span id="header-title"><!--后台拿到的标题文本放这里--></span>旅游大数据
        </div>
    </div>
    <!-- 内容 -->
    <div id="content" class="row">
        <div class="col-md-3 left_box">
            <div class="heatmap">
                <!-- 景点客流量排行 -->
                <div class="heatmap_title_box">
                    <img class="heatmap_title_ico" src="./images/title_arrow.png">
                   <a href="tourists.html">景点客流量排行</a>
                    <!-- 热力地图 -->
                    <!--<div id="my_heat_map"></div>-->
                    <div id="scenic_spot"></div>
                </div>
                <!-- 年度旅游消费 -->
                <div class="year_consume_box">
                    <img class="heatmap_title_ico" src="./images/title_arrow.png">
                   <a href="tourists.html">停留时长分布</a>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="year_consume"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6" style="padding: 0 20px;">
            <div class="row">
                <div class="col-md-6 tourist_accumulative">
                    <p class="tourist_now num_title_1">今日入园采样人数</p>
                    <span class="now_num numberRun" id="tourists_lose_today"><!--今日实时累计游客数--></span>
                    <span class="relative_num num_title_2">较昨日采样人数<span id="increase"><!--增加或减少--></span>
                        <span id="yesterday"><!--人数--></span>人</span>
                </div>
                <div class="col-md-6 tourist_accumulative box-right">
                    <p class="tourist_year">年度累计采样人数</p>
                    <span class="now_num numberRun2 visitors_year"><!--今年实时累计游客数--></span>
                    <span class="relative_num">去年采样总人数<span id="year_increase"><!--增加或减少--></span>
                        <span id="visitors_year_num"><!--人数--></span>人</span>
                </div>
                <div class="row source">
                    <div class="col-md-12 source_padding" style="padding-right: 0px;">
                        <div class="source_color">
                            <img class="heatmap_title_ico" src="./images/title_arrow.png">
                            <a href="heatmap.html">景区热力图</a>
                        </div>
                        <div id="my_heat_map"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 left_box" style="padding-right: 0px">
            <div class="interest">
                <img class="heatmap_title_ico" src="./images/title_arrow.png">
                <a href="passenger.html">消费偏好</a>
                <!--<div id="tourist_interest"></div>-->
                <div id="consumption"></div>
            </div>
            <div class="consumption_box">
                <img class="heatmap_title_ico" src="./images/title_arrow.png">
                <a href="consume.html">游客来源</a>
                <!--<div id="consumption"></div>-->
                <div>
                    <div class="col-md-6" style="padding: 0px;">
                        <div id="source_bar1"></div>
                    </div>
                    <div class="col-md-6" style="padding: 0px;">
                        <div id="source_bar2"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class=" bottom_box">
        <div class=" bottom_left">
            <div class="passenger_flow_volume title_icon">
                <img class="heatmap_title_ico" src="./images/title_arrow.png">
                <!--<a href="passenger.html">日客流量</a>-->
                <a href="tourists.html">日客流量</a>
            </div>
            <div id="passenger"></div>
        </div>
        <div class=" bottom_right">
            <div class="row">
                <div class="title_icon">
                        <img src="./images/title_arrow.png" alt="">
                        <a href="consume.html">游客特征</a>
                </div>
                <!-- 性别 -->
                <div>
                    <div id="gender" class="col-md-4"></div>
                    <!-- 年龄 -->
                    <div id="age" class="col-md-4"></div>
                    <!-- 出行方式 -->
                    <div id="getting_around" class="col-md-4"></div>
                </div>

            </div>
            
        </div>
    </div>
    <!-- 退出按钮 -->
    <div id="quitBtn">
        <img src="./images/close_icon_nor@1x.png" alt="">
        <a href="./login.html">退出登录</a>
    </div>
    <!-- 时间 -->
    <div id="showTime"></div>
    <!-- 引入热力图文件 -->
    <script type="text/javascript" src="./script/Heatmap_min.js"></script>
    <!-- 引入自定义js文件 -->
    <script src="./script/index.js"></script>

    <!-- 引入中国地图js文件 -->
    <!--<script src="./script/china.js"></script>-->
    <!--<script>-->
      <!--//卷轴模块-->
      <!--var scroll = new Scroll({-->
        <!--dom : $("#tourists_lose_today"),  //操作的节点-->
        <!--num : 1,                //几个卷轮-->
        <!--delay : 1000            //时间间隔单位ms-->
      <!--});-->
      <!--scroll.run();-->
    <!--</script>-->
</body>

</html>